<template>
  <div class="msgbox" v-if="title">
    <el-divider>请仔细阅览题目</el-divider>
    {{separate(title)[0]}}<br>
    <el-divider>选项区</el-divider>
    {{separate(title)[1]}}<br>
    <el-input placeholder="请输入你的答案..." v-model="result"></el-input>
    <el-button @click="getResult">✔️提交</el-button>
    <span class="answer" v-show="isShow">{{this.answer}}</span>
  </div>
</template>

<script>
export default {
  name: "Test-show",
  data(){
    return{
      result:'',
      sum:0,
      isShow:false
    }
  },
  props:['title','answer'],
  methods:{
    separate(title){
      title=title.split("!!!");
      return title
    },
    getResult(){
      let answer=this.answer
      let result=this.result
      if(answer.length!==result.length){
        this.$message("请不要答多或答少哦")
      }
      else{
        for (let i=0;i<answer.length;i++){
          if(this.answer.charAt(i)===this.result.charAt(i)){
            this.sum++
          }
        }
          this.open()
      }
        console.log(this.sum)
    },
    open() {
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '你回答对了 '),
          h('i', { style: 'color: teal' }, this.sum+'道')
        ]),
        showCancelButton: true,
        confirmButtonText: '重新作答',
        cancelButtonText: '查看答案',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done();
            this.sum=0
            this.isShow=false
            this.$msgbox.close()
          } else {
            done();
            this.sum=0
            this.isShow=true
          }
        }
      }).then(action => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        });
      });
    }

  }
  
}
</script>

<style scoped>
.msgbox{
  /*background: greenyellow;*/
}
.el-input{
  margin-top: 3%;
  margin-left: 5%;
  width: 60%;
}
.el-button{
  margin-left: 3%;
}
.answer{
  color:green;
  margin-left: 3%;
}
</style>